<template>
  <div class="forget-form">
    <top-back :topBackParams="topBackParams"></top-back>
    <div class="forgetCon">
      <section class="mlogin-user">
        <section class="mlogin-name">
          <section class="mlogin-left tel">手机号码</section>
          <section class="mlogin-right">
            <input
              type="text"
              name="mobile"
              v-model="formDataForget.mobile"
              placeholder="请输入您的手机号码"
              value
            />
          </section>
        </section>
        <section class="mlogin-name">
          <section class="mlogin-left password">密码</section>
          <section class="mlogin-right">
            <input
              type="password"
              name="password"
              v-model="formDataForget.password"
              placeholder="设置密码"
              value
            />
          </section>
        </section>
        <section class="mlogin-name">
          <section class="mlogin-left verify">验证码</section>
          <section class="mlogin-right">
            <input
              type="text"
              placeholder="请输入右图验证码"
              name="verify"
              class="setpwd-text"
              v-model="formDataForget.verify"
            />
          </section>
          <img :src="verifyImg" class="code-img" @click="refreshVerify" />
        </section>
        <section class="mlogin-name">
          <section class="mlogin-left msg-verify">短信验证码</section>
          <section class="mlogin-right">
            <input
              type="text"
              placeholder="请输入短信验证码"
              name="code"
              class="setpwd-text"
              v-model="formDataForget.msgVerify"
            />
          </section>
          <a class="msg-verify-btn" href="javascript:;" @click="refreshmsgVerify">{{msgVerifyTxt}}</a>
        </section>
      </section>
      <section class="mlogin_btn_box">
        <van-button round href="javascript:;" class="btn mlogin_but red-gra-btn" @click="submitForget">确定重置</van-button>
        <van-button round  href="javascript:;" class="btn mlogin_back" @click="Jump('/mb/loginRegister/login')">返回登录</van-button>
      </section>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import TopBack from '@/components/TopBack/index.vue'
import { validLength, validateMobile } from '@/utils/validate'
import { getVerify, postMsgVerify, postForget } from '@/api/loginRegister/index'

export default Vue.extend({
  name: 'index',
  components: {
    TopBack
  },
  data() {
    return {
      topBackParams: {
        headerTitle: '重置密码',
        bgColor: '#f8f8f8',
        position: 'fixed'
      },
      verifyImg: '', // 图形验证码
      msgVerifyTxt: '获取验证码',
      formDataForget: {
        mobile: '',
        password: '',
        verify: '',
        msgVerify: ''
      }
    }
  },
  created() {
    this.refreshVerify()
  },
  // beforeCreate() {
  //   $('body').addClass('bg_white')
  // },
  // destroyed() {
  //   $('body').removeClass('bg_white')
  // },
  methods: {
    Jump(url, data) {
      this.$JumpPath(this, url, data)
    },
    // 刷新验证码
    refreshVerify() {
      getVerify().then((res) => {
        const src =
          `data:image/jpg;base64,${
            btoa(
              new Uint8Array(res).reduce(
                (data, byte) => data + String.fromCharCode(byte),
                ''
              )
            )}`
        this.verifyImg = src
      })
    },
    // 获取验证码倒计时
    setTimeoutVerify() {
      let count = 60
      this.msgVerifyTxt = `${count}秒后重新获取`
      const timer = setInterval(() => {
        this.msgVerifyTxt = `${count}秒后重新获取`
        if (count <= 0) {
          this.msgVerifyTxt = '获取验证码'
          clearInterval(timer)
        }
        count--
      }, 1000)
    },
    // 获取短信验证码
    refreshmsgVerify() {
      if (this.msgVerifyTxt == '获取验证码') {
        const mobile = this.formDataForget.mobile
        const password = this.formDataForget.password
        const verify = this.formDataForget.verify
        if (validateMobile(mobile)) {
          if (validLength(password, 5)) {
            if (validLength(verify)) {
              const data = { mobile, code: verify }
              postMsgVerify(data).then((res) => {
                if (res.status === 1) {
                  this.$Error('发送成功')
                  this.setTimeoutVerify()
                } else {
                  this.$Error(res.msg)
                }
              })
            } else {
              this.$Error('请输入验证码')
              return false
            }
          } else {
            this.$Error('密码长度不能少于6位')
            return false
          }
        } else {
          this.$Error('请输入正确的手机号码')
          return false
        }
      }
    },
    // 确定重置
    submitForget() {
      const mobile = this.formDataForget.mobile
      const password = this.formDataForget.password
      const msgVerify = this.formDataForget.msgVerify
      if (!validateMobile(mobile)) {
        this.$Error('请输入正确的手机号码')
        return false
      }
      if (!validLength(password, 5)) {
        this.$Error('密码长度不能少于6位')
        return false
      }
      if (!validLength(msgVerify)) {
        this.$Error('请输入短信验证码')
        return false
      }
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      const params = {
        mobile,
        password,
        code: msgVerify
      }
      postForget(params).then((res) => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          // 重置密码成功后跳到登录页
          const that = this
          this.$Error('重置成功')
          setTimeout((res) => {
            that.Jump('/mb/loginRegister/login')
          }, 1000)
        } else {
          this.$Error(res.msg)
        }
      })
    }
  }
})
</script>

<style lang="scss">
@import "src/styles/loginRegister";
</style>
